<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAdd">添加部门</el-button>
      </el-col>
    </el-row>
    <!-- Form -->
    <el-dialog title="选择部门" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="所属父级部门" class="font" :label-width="formLabelWidth">
          <el-select v-model="form.parentId" placeholder="请选择父级部门">
            <el-option v-for="d in depts" v-bind:key="d.id" :label="d.name" :value="d.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.createDate"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDept">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="id"
          label="id"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="180">
      </el-table-column>

      <el-table-column
          prop="createDate"
          label="日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="parentId"
          label="parentId"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openUpdateDep(scope.row)"
              v-hasPermi="['system:dict:edit']"
          >修改</el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleClick(scope.row)"
              v-hasPermi="['system:dict:remove']"
          >删除</el-button>


        </template>
      </el-table-column>
    </el-table>



    <el-dialog title="部门修改" :visible.sync="dialogFormVisible01">
      <el-form :model="form01">
        <el-form-item label="所属父级部门" class="font" :label-width="formLabelWidth">
          <el-select v-model="form01.parentId" placeholder="请选择父级部门">
            <el-option v-for="d in udepts" v-bind:key="d.id" :label="d.name" :value="d.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth01">
          <el-input v-model="form01.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期时间" :label-width="formLabelWidth01">
          <el-date-picker
              v-model="form01.createDate"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDep">确 定 修 改</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>


export default {
  name: "DeptView",
  data() {
    return {
      formLabelWidth01:'100px',
      form01:{},
      dialogFormVisible01:false,
      formLabelWidth:'100px',
      form:{},
      dialogFormVisible:false,
      //2属性定义
      tableData:[],
      depts:[],
      udepts:[],
    }
  }, methods: {
    openUpdateDep(row){
      this.form01=row;
      this.getparentdeptsupdate(row.id);
      this.getdeptbypid(row.parentId);
      this.dialogFormVisible01=true;
    },
    getparentdeptsupdate(id){
      this.axios.post("/postservice/posts/getparentdeptsupdate?id="+id).then(res=>{
        if(res.data.code==200) {
          this.udepts=res.data.data;
        }
      })
    },
    getdeptbypid(parentId){
      this.axios.post("/postservice/posts/getdeptbypid?parentId="+parentId).then(res=>{
        if(res.data.code==200) {
          this.form01.parentId=res.data.data;
        }
      })
    },
    getparentdepts() {
      this.axios.post("/postservice/posts/parentdept").then(res=>{
        if(res.data.code==200) {
          this.depts=res.data.data;
        }
      })
    },
    updateDep(){
      this.axios.post("/postservice/posts/updateDept",this.form01).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible01=false;
          this.treeList();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    handleClick(row){
      this.axios.get("/postservice/posts/deleteDept?id="+row.id).then(r=>{
        if(r.data.code==200){
          this.$message.success(r.data.msg);
          this.treeList();
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    addDept(){
      this.axios.post("/postservice/posts/saveDept",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.treeList();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    openAdd(){
      this.form={};
      this.dialogFormVisible=true;
      this.getparentdepts();
    },
    treeList(){
      this.axios.post("/postservice/posts/deptlist").then(res=>{
        this.tableData=res.data.data;
      })
    },

  }, created() {
    //4.钩子函数
    //this.list();
    this.treeList();
  }
}
</script>

<style scoped>

</style>